{% extends "_layouts/template.html" %}
{% load i18n %}
{% load url from future %}

{% block meta-description %}{% trans "My Site" %}{% endblock meta-description %}
{% block meta-keywords %}{% trans "cooking" %}, {% trans "recipes" %}{% endblock meta-keywords %}


{% block extra-header %}
{% endblock extra-header %}

{% block navbar-header %}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="{% url 'home' %}">{% block header-title %}{% trans "Cooking" %}{% endblock header-title %}</a>
{% endblock navbar-header %}

{% block navbar-main %}
<li>
  <a href="{% url "yummy:category_index" %}">Рецепты</a>
</li>
<li>
  <a href="{% url "yummy:ingredient_index" %}">Ингридиенты</a>
</li>
<li>
  <a href="{% url "users:profiles" %}">Наши гурманы</a>
</li>
<li>
  <a href="#">Статьи</a>
</li>
<li>
  <a href="#">Добавить рецепт</a>
</li>
{% endblock navbar-main %}


{% block navbar-right %}
{# search #}
<form class="navbar-form navbar-left" role="search">
    <div class="btn-group">
      <input type="text" class="form-control form-control-addon col-lg-3" placeholder="Поиск...">
    </div>
    <button type="submit" class="btn btn-link search-wrapper"><i class="icon-search icon-2x" style="text-decoration: none;"></i></button>
</form>
{# user #}
{% if user.is_authenticated %}
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i> {{ user.first_name }} {{ user.last_name }}<span class="icon-caret-down"></span></a>

  <ul class="dropdown-menu">
    <li>
      <a href="{% url 'users:my_profile' %}"><i class="icon-fixed-width icon-home"></i>  Профиль</a>
    </li>
    <li>
      <a href="/messages/"><i class="icon-fixed-width icon-envelope"></i>  Сообщения <span class="badge pull-right">42</span> </a>
    </li>
    <li>
      <a href="{% url 'auth_password_change' %}"><i class="icon-fixed-width icon-edit-sign"></i> Изменить пароль</a>
    </li>
    <li class="divider"></li>
    <li>
      <a href="{% url "auth_logout" %}"><i class="icon-fixed-width icon-signout"></i>  Выход</a>
    </li>
  </ul>
</li>
{% endif %}

{% if not user.is_authenticated %}
<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-group"></i>  Login / Register <span class="icon-caret-down"></span></a>

  <ul class="dropdown-menu">
    <li>
      <a data-toggle="modal" href="{% url 'auth_login' %}">
      <i class="icon-signin"></i> {% trans 'Login' %}
      </a>
    </li>
    <li>
      <a href="{% url 'userprofiles_registration' %}">
      <i class="icon-plus-sign-alt"></i> {% trans 'Register' %}
      </a>
    </li>
    <li class="divider"></li>
    <li>
      <a href="{% url 'auth_password_reset' %}">
      <i class="icon-info-sign"></i> {% trans 'Forgot Password' %}?
      </a>
    </li>
  </ul>
</li>
{% endif %}
{% endblock navbar-right %}

{% block alert-message %}
{% if messages %}
  {% for message in messages %}
    <div class="alert alert-{{ message.tags }}">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{ message }}    
    </div>
  {% endfor %}
{% endif %}
{% endblock alert-message %}

{% block category-block-content %}
<h2>Классические рецепты <span class="badge"></span></h2>
<p>
  Классика жанра!
</p>
<p>
  Выбирайте категории:
</p>
<p>
  <img src="{{ STATIC_URL }}site/sprite-food.png" alt=""/>
</p>

<hr style="border-bottom: dotted 2px #cccccc;">

<h2>Рецепты для кухонной техники <span class="badge"></span></h2>
<p>
  Приготовление блюд с помощью различной кухонной техники, несомненно облегмает жизнь хозяке.
</p>
<p>
  Выбирайте оборудование:
</p>
<p>
  <img src="{{ STATIC_URL }}site/sprite-food.png" alt=""/>
</p>

<hr style="border-bottom: dotted 2px #cccccc;">

<h2>Скатерть-самобранка <span class="badge"></span></h2>
<p>
  Нужно быстро накормить толпу внезапных гостей? Тогда вам сюда.
</p>
<p>
  Выбирайте категории:
</p>
<p>
  <img src="{{ STATIC_URL }}site/sprite-food.png" alt=""/>
</p>
{% endblock category-block-content %}

{% block dayrecipe-block-content %}{% endblock dayrecipe-block-content %}


{% block dayuser-block-content %}

{# Пользователь с самым высоким рейтингом на текущий момент #}

          <h2>Гурман дня</h2>
          <div id="portfolio_container" class="portfolio_strict">
          <div class="portfolio_item cat_travel">
                    <div class="portfolio_photo" style="background-image:url(/media/images/PICT3428.JPG)"> <a href="portfolio_item.html"> 
                         <p>Фёдор увлекается приготовлением и дегустацией напитков...</p>
                         </a> </div>
                    <div class="portfolio_description">
                         <h3><a href="portfolio_item.html">Фёдор Кожемякин</a></h3>
                         <p>Экспет по напиткам</p>
                    </div>
               </div>
               </div>
  <hr style="border-bottom: 1px solid #cccccc;">
{% endblock dayuser-block-content %}

{% block top-block-content %}
          <h2>Популярное на сайте</h2>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Популярные гурманы
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <h4><li><a href="#">Маша</a></li></h4>
        <h4><li><a href="#">Маша</a></li></h4>
        <h4><li><a href="#">Маша</a></li></h4>
        <h4><li><a href="#">Маша</a></li></h4>
        <h4><li><a href="#">Маша</a></li></h4>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Популярные рецепты
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <h4><li><a href="#">Курица гриль</a></li></h4>
        <h4><li><a href="#">Курица гриль</a></li></h4>
        <h4><li><a href="#">Курица гриль</a></li></h4>
        <h4><li><a href="#">Курица гриль</a></li></h4>
        <h4><li><a href="#">Курица гриль</a></li></h4>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Популярные статьи
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        <h4><li><a href="#">Как варить топор</a></li></h4>
        <h4><li><a href="#">Как варить топор</a></li></h4>
        <h4><li><a href="#">Как варить топор</a></li></h4>
        <h4><li><a href="#">Как варить топор</a></li></h4>
      </div>
    </div>
  </div>
</div>
<hr style="border-bottom: 1px solid #cccccc;">
{% endblock top-block-content %}

{% block recipes-block-content %}{% endblock recipes-block-content %}

{% block footer %}
<div class="container">
  <div class="raw">
    <div class="col-lg-4 pull-center"></div>
    <div class="col-lg-4 pull-center">
      <div id="footer">
        <div style="links">
          <a href="/about">About</a>
          <a href="/tour">Tour</a>
          <a href="/faq">FAQs</a>
          <a href="/privacy-policy">Privacy policy</a>
        </div>
        <div class="clear"></div>
        <div style="text-align:center; color:#ccc; font-size:10px;">
          &copy; Copyright Band Mate 2012 - 2013
        </div>
      </div>
    </div> <!-- <div class="col-lg-4 pull-center"> -->
  </div> <!-- <div class="raw"> -->
</div> <!-- <div class="container"> -->
{% endblock footer %}

{% block extra-js %}
<script type="text/javascript" src="{{ STATIC_URL }}site/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="http://css-tricks.com/examples/StartStopSlider/js/startstop-slider.js"></script>


<script type="text/javascript">
$(function() {
    // run the currently selected effect
    function runEffect() {
      // run the effect
      $( "#shown_block" ).toggle( "drop", {}, 500 );
    };
 
    // set effect from select menu value
    $( "#button_toggle" ).click(function() {
      runEffect();
      return false;
    });
  });

$(window).load(function() { 
     $('#Carousel2').carousel();
     $(".fancybox-thumb").fancybox({
      prevEffect  : 'none',
      nextEffect  : 'none',
      helpers : {
        title : {
          type: 'outside'
        },
        thumbs  : {
          width : 50,
          height  : 50
        }
      }
    });
});

</script>
{% endblock extra-js %}

{% block extra-css %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}site/css/extra/top-carousel.css">
<link rel="stylesheet" href="{{ STATIC_URL }}site/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<style>
body {
  padding-bottom: 40px;
  padding-top: 90px;
  color: #5a5a5a;
  background-image: url('{{ MEDIA_URL }}pattern1.jpg');
}
.myraw {
  background-image: url('{{ MEDIA_URL }}p4.png');
  background-color: transparent;
}
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  //background-color: #f5f5f5;
  border-radius: 4px;
  //background-image: inherit;
}

.well2 {
  //min-height: 20px;
  //padding: 19px;
  //margin-bottom: 20px;
  //background-color: #f5f5f5;
  border: 2px solid #e3e3e3;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  /*-webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);*/
  
  -webkit-box-shadow: 0 0 10px 2px #A9A9A9;
     -moz-box-shadow: 0 0 10px 2px #A9A9A9;
          box-shadow: 0 0 10px 2px #A9A9A9;
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 45%;
  left: 26%;
  z-index: 5;
  display: inline-block;
}

.carousel-indicators {
  position: absolute;
  bottom: 0px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  // position: relative;
  position: fixed;
  // z-index: 1000;
  margin-left: 55px;
  margin-right: 55px;
  border-radius: 8px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }
}

/* --------------------->>> search in the secondary-menu (top menu) <<<---------------------*/
.search-wrapper {
    margin: 0;
    padding: 0;
    left: -36px;
    position: relative;
}
.form-control-addon {
  padding-right:  36px;
  padding-left:  8px;
  border-radius: 8px;
}
.newcarousel {
  margin-bottom: 60px;

  /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
  // margin-top: -90px;
  margin-top: 60px;
  visibility: hidden; 
  text-align: center; 
  height: 500px; 
  min-width: 100%;
}
article,
hgroup {
  display: block;
}
/* =General Page elements
-------------------------------------------------------------- */
figure {
  margin: 14px 0 28px 0;
}
.hgroup {
  border-bottom: 1px solid #cccccc;
  margin: 26px 0px;
  padding: 17px 0;
  background-color: transparent;
}
.hgroup h1 {
  font-size: 30px;
  font-weight: 300;
  line-height: 1em;
  margin: 0 0 0.3em 0;
  padding: 0;
}
.hgroup h2 {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5em;
  margin: 0 20% 0 0;
  padding: 0;
  color: #555555;
}
.hgroup .breadcrumb {
  font-size: 12px;
  background-color: #f3f3f3;
  margin: 0 0 0px;
  padding: 6px 15px;
  border: solid 1px #cccccc;
}
/* =Portfolio Page elements
-------------------------------------------------------------- */
ul#portfolio_filters {
  margin: 0 0 24px 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
ul#portfolio_filters li {
  float: left;
}
ul#portfolio_filters li a {
  display: block;
  padding: 6px 6px 6px 0;
  margin: 0 3px;
  text-transform: uppercase;
}
ul#portfolio_filters li a:hover,
ul#portfolio_filters li a:active {
  border-bottom: solid 0px #0088cc;
  text-decoration: none;
}
ul#portfolio_filters li .active a,
ul#portfolio_filters li .active a:hover {
  border-bottom: solid 1px #0088cc;
}
.portfolio_strict .portfolio_item {
  text-align: center;
  background-color: #ffffff;
  padding: 8px;
  border: solid 1px #e7e7e7;
  height: 290px;
  overflow: hidden;
  margin-bottom: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.portfolio_strict .portfolio_item:hover {
  background: url(/media/wild_oliva_blue_light.png);
}
.portfolio_strict .portfolio_item:hover a {
  color: #ffffff;
  text-decoration: none;
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}
.portfolio_strict .portfolio_item .portfolio_photo {
  height: 220px;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.portfolio_strict .portfolio_item .portfolio_photo a {
  display: block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  text-decoration: none;
  background: #000000;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.portfolio_strict .portfolio_item .portfolio_photo a i {
  background: url(images/backgrounds/wild_oliva_blue_light.png);
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
  padding: 10px;
  margin: 20% 0;
  line-height: 30px;
  height: 30px;
  border: solid 5px;
}
.portfolio_strict .portfolio_item .portfolio_photo a p {
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.portfolio_strict .portfolio_item .portfolio_description {
  padding: 10px;
  margin-bottom: 20px;
}
.portfolio_strict .portfolio_item .portfolio_description h3 {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
}
.portfolio_strict .portfolio_item .portfolio_description p {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #888888;
}
.portfolio_masonry .portfolio_item {
  text-align: center;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 24px;
}
.portfolio_masonry .portfolio_item a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.portfolio_masonry .portfolio_item a img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.portfolio_masonry .portfolio_item a .overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  background: #000000;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  position: absolute;
  top: 0px;
  left: 0px;
}
.portfolio_masonry .portfolio_item a .overlay .desc {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 90%;
  height: 35%;
  margin: auto;
}
.portfolio_masonry .portfolio_item a .overlay h3 {
  font-size: 20px;
  line-height: 22px;
}
.portfolio_masonry .portfolio_item a .overlay i {
  background: url(images/backgrounds/wild_oliva_blue_light.png);
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
  padding: 10px;
  line-height: 33px;
  height: 30px;
  width: 30px;
  border: solid 5px;
}
.portfolio_masonry .portfolio_item a:hover .overlay {
  color: #ffffff;
  text-decoration: none;
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}
#portfolio_slider_wrapper {
  padding: 10px 0;
}
#portfolio_slider_wrapper #portfolio_slider .container a {
  display: block;
  width: 100%;
  height: 100%;
}
#portfolio_slider_wrapper #carousel {
  padding: 10px 0;
  margin: 0 0 10px 0;
}
#portfolio_slider_wrapper #carousel ul.slides li {
  height: 140px;
  overflow: hidden;
  margin-right: 10px;
}
article.portfolio_details h3 {
  line-height: 1.2em;
}
</style>
{% endblock extra-css %}
